<template>
  <div class="score" :class="styleType">
    <span class="score-item" v-for="(item, index) of itemClass" :class="item" :key="index"></span>
  </div>
</template>

<script>
export default {
  name: 'CommonScore',
  props: {
    size: Number,
    score: Number
  },
  computed: {
    styleType () {
      return 'star-' + this.size
    },
    itemClass () {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        result.push('on')
      }
      if (hasDecimal) {
        result.push('half')
      }
      while (result.length < 5) {
        result.push('off')
      }
      return result
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .score
    display:flex
    justify-content: space-between
    align-items: center
    .score-item
      background-size:100%
    .score-item:last-child
      margin:0
  .star-24 > .score-item
    width:20px
    height:19px
  .on
    bg-image('star24_on')
  .half
    bg-image('star24_half')
  .off
    bg-image('star24_off')
  .star-36 > .score-item
    width:30px
    height:29px
  .on
    bg-image('star36_on')
  .half
    bg-image('star36_half')
  .off
    bg-image('star36_off')
  .star-48 > .score-item
    width:40px
    height:38px
  .on
    bg-image('star48_on')
  .half
    bg-image('star48_half')
  .off
    bg-image('star48_off')
</style>
